<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="/static/home/css/reset.css">
  <link rel="stylesheet" href="/static/home/plug/layui/css/layui.css">
  <title>访客登记</title>
  <script type="text/javascript" src="/static/home/js/jquery-3.1.1.min.js"></script>
  <script src="/static/home/plug/layui/layui.js"></script>
  <script>
    var local_url="/static/admin/js/";
    var deviceWidth = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
  </script>
  <script src="/static/admin/js/base.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      background: #fafafa;
    }

    .content {
      border-bottom: 0.15rem solid #f4f4f4;
    }

    .list {
      font-size: 0.26rem;
      color: #666666;
      font-weight: 500;
      padding: 0 0.32rem;
      width: 7.5rem;
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      height: 1.02rem;
      line-height: 1.02rem;
      justify-content: space-between;
    }

    .val {
      color: #333333;
      font-weight: bolder;
    }

    .value {
      font-weight: bolder;
      flex: 1;
      text-align: right;
      border: 0;
      font-size: 0.26rem;
    }

    .tl span, .bottom span {
      color: red;
      margin-right: 0.06rem;
      font-weight: bolder;
    }

    .bottom {
      font-size: 0.26rem;
      padding: 0.3rem 0.32rem 0;
    }

    textarea {
      width: 6.87rem;
      height: 1.82rem;
      line-height: 0.4rem;
      padding: 0.14rem 0.3rem;
      border: 1px solid #bfbfbf;
      color: #666666;
      margin: 0.2rem auto 0;
      font-size: 0.26rem;
    }

    .btn {
      width: 6.6rem;
      height: 0.84rem;
      background: #00BFFF;
      color: #fff;
      text-align: center;
      line-height: 0.84rem;
      border-radius: 0.42rem;
      font-size: 0.3rem;
      border: 1px solid #00BFFF;
      margin: .74rem auto 0.58rem;
      cursor: pointer;
      font-weight: bolder;
    }

    .layui-form-radio > i:hover, .layui-form-radioed > i {
      color: #b4a872;
    }

    .layui-form-radio {
      line-height: 40px !important;
    }
    .layui-timeline-axis{
      color: #aea16c !important;
    }

    .check-items{overflow-x: auto; padding: 2px 0;}
    .flow-flex-row {box-direction: row;
      box-orient: horizontal;
      -webkit-box-orient: horizontal;
      -ms-flex-direction: row;
      flex-direction: row;
    }
    .flow-flexbox { width: 100%;text-align: left;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      display: -webkit-flex;
      box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .check-item{width: auto; -ms-flex-negative: 0; flex-shrink: 0; padding:4px 0}
    .check-item i{margin-right:3px; color:#646464;}
    .check-item span{color:#999;margin:0 3px;}
    .check-item .layui-icon {font-size:18px;}
    .check-item .layui-icon.layui-icon-right{font-size:12px;}
    .layui-icon[data-ok]{color:#34a853}
    .layui-icon[data-no]{color:#FF5722;}
    .check-item-status{color:#999; font-size:12px; margin-left:3px;}

    .flow-tips{padding:6px 10px;}
    .flow-tips li{padding:5px 0;}
    .flow-tips li i{color:#4285f4;}
    .flow-tips li span{color:#999; font-size:12px; margin-left:4px;}

    .flow-record{padding:4px 4px 0;}
    .flow-record .layui-timeline-item{text-decoration:line-through; color:#acacac; padding-bottom:10px;}
    .flow-record .layui-timeline-item.delete-0{text-decoration:none; color:#323232;}
    .layui-timeline-content ul{font-size:12px;}
    .check-status{color:#999; margin-left:5px;}
    .check-remark{padding:6px; margin-top:6px; margin-bottom:10px; border-radius:4px; background-color:#f5f5f5;}
    .check-record{line-height:1.5; padding:4px 0}
    .flow-this{font-weight:800;}
    .flow-this i{color:#4285f4}

    .layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) {
      background-color: #ffffff;
    }

    .layui-form-select {
      top: 0.12rem;
    }
    .layui-form-select dl dd.layui-this {
      background-color: #aea16c !important;
    }
    .layui-form-select .layui-edge {
      top: 40% !important;
    }
  </style>
</head>
<body>
<form class="layui-form">

  <div class="content">
    <div class="list">
      <div class="tl"><span>*</span>访客姓名</div>
      <input class="value" name="visitoruname" id="visitoruname" lay-verify="required" lay-reqtext="请输入访客姓名" placeholder="请输入访客姓名"/>
    </div>
    <div class="list">
      <div class="tl"><span>*</span>访客手机号码</div>
      <input type="number" class="value" name="visitorphone" id="visitorphone" lay-verify="required" lay-reqtext="请输入访客手机号码" placeholder="请输入访客手机号码"/>
    </div>
    <div class="list">
      <div class="tl"><span>*</span>来访人数</div>
      <input type="number" min="1" class="value" name="visitornum" id="visitornum" lay-verify="required" lay-reqtext="请输入来访人数" placeholder="请输入来访人数" />
    </div>
    <div class="list">
      <div class="tl"><span>*</span>拜访开始日期</div>
      <input class="value" name="visitorsdate" id="visitorsdate" readonly="readonly" lay-verify="required" lay-reqtext="请输入拜访开始日期" placeholder="请输入拜访开始日期"/>
    </div>
    <div class="list">
      <div class="tl"><span>*</span>拜访开始时间</div>
      <input class="value" name="visitorstime" id="visitorstime" readonly="readonly" lay-verify="required" lay-reqtext="请输入拜访开始时间" placeholder="请输入拜访开始时间"/>
    </div>
    <div class="list">
      <div class="tl"><span>*</span>拜访结束日期</div>
      <input class="value" name="visitoredate" id="visitoredate" readonly="readonly" lay-verify="required" lay-reqtext="请输入拜访结束日期" placeholder="请输入拜访结束日期"/>
    </div>
    <div class="list">
      <div class="tl"><span>*</span>拜访结束时间</div>
      <input class="value" name="visitoretime" id="visitoretime" readonly="readonly" lay-verify="required" lay-reqtext="请输入拜访结束时间" placeholder="请输入拜访结束时间"/>
    </div>
    <div class="list">
      <div class="tl"><span>*</span>楼栋信息</div>
      <input class="value" name="visitorbuilderinfo" id="visitorbuilderinfo" lay-verify="required" lay-reqtext="请输入楼栋信息，例如：X座X楼" placeholder="请输入楼栋信息，例如：X座X楼"/>
    </div>
    <div class="list">
      <div class="tl">访客车牌号码</div>
      <input class="value" name="visitorcarnum" id="visitorcarnum" lay-reqtext="请输入访客车牌号码" placeholder="请输入访客车牌号码"/>
    </div>

  </div>

  <div class="bottom">
    <div class="tlt"><span>*</span>来访事由：</div>
    <textarea name="visitor_reason" lay-verify="required" lay-reqtext="请输入来访事由" placeholder="请输入来访事由"></textarea>
  </div>

  <div class="bottom">
    <div class="tlt"><span>邀请信息和访客码将以短信的方式发送至访客</span></div>
  </div>

  <div class="btn btn1" lay-submit="" lay-filter="add">提交</div>

</form>
</body>
<script type="text/javascript">
  layui.use(['element', 'form', 'jquery', 'laydate', 'lucky'], function () {

    var element = layui.element;
    var table = layui.table;
    var form = layui.form;
    var $ = layui.jquery;
    var laydate = layui.laydate;
    var lucky = layui.lucky;

    //日期范围
    laydate.render({
      elem: '#visitorsdate',
      type: 'date',//设置日期的类型
      theme: '#00BFFF',
      trigger: "click"
    });

    laydate.render({
      elem: '#visitorstime',
      type: 'time',//设置日期的类型
      theme: '#00BFFF',
      trigger: "click"
    });

    laydate.render({
      elem: '#visitoredate',
      type: 'date',//设置日期的类型
      theme: '#00BFFF',
      trigger: "click"
    });

    laydate.render({
      elem: '#visitoretime',
      type: 'time',//设置日期的类型
      theme: '#00BFFF',
      trigger: "click"
    });

    form.render();

    /**
     * 提交表单数据
     */
    form.on('submit(add)', function (data) {
      // console.log(data.field);
      lucky.FormSubmit("{:url('index/addvisitor')}", data.field, 0 , 0 , "{:url('index/visitor')}");
      return false;
    });


  });

</script>
<!-- Matomo -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(["setDocumentTitle", document.title]);
  _paq.push(['setUserId', '{if $homeuser_info.oaid}{$homeuser_info.oaid}{else}{$homeuser_info.user_id}{/if}']);
  _paq.push(['setCustomDimension', 1, 'H5']);
  _paq.push(['setCustomDimension', 2, 'H5']);
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  _paq.push(['enableHeartBeatTimer']);
  (function() {
    var u="https://tracking.gtcloud.cn/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1041']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->
</html>